<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>签名版</title>
</head>
<script src="./js/jquery.min.js"></script>
<script src="./js/jSignature.min.js"></script>
<style>
    body{
        background-color: azure;
    }
    #signature{
        /* width: 600px;
        height: 600px; */
        background-color: #fff;
    }
    .signImg{
        width: 200px;
        height: 100px;
        /* image-rendering: -webkit-optimize-contrast; Webkit (non-standard naming) */
    }

</style>
<body>
    <div id="signature"></div>
    <br>
    <button type="button" class="btn btn-primary btn-block" id="save">保存</button>
    <button type="button" class="btn btn-default btn-block" id="clear">清除</button>
    这里是保存后图片:
    <img class="signImg" src="" alt="">
    <script>
        var param = {
            width: '100%', //签名区域的宽
            height: '600px', //签名区域的高
            cssclass: 'jrw-signature', //画布的类 可以写自定义的样式
            UndoButton: true, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
            signatureLine: false, //去除默认画布上那条横线
            lineWidth: '3' //画笔的大小
        };
        //初始化签名面板
        $("#signature").jSignature(param);

        //jSignature提供了清除的API reset
        $('#clear').click(function () {
            $("#signature").jSignature("reset");
        });
        let str = `data:image/svg+xml,<?xml%20version=%221.0%22%20encoding=%22UTF-8%22%20standalone=%22no%22?%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20width=%221062%22%20height=%22319%22%3E%3Cpath%20stroke-linejoin=%22round%22%20stroke-linecap=%22round%22%20stroke-width=%223%22%20stroke=%22rgb(0,%200,%200)%22%20fill=%22none%22%20d=%22M%201%2067%20c%200.14%200.14%205.11%205.47%208%208%20c%207.99%206.99%2015.45%2013.77%2024%2020%20c%2015.18%2011.06%2029.85%2022.06%2046%2031%20c%2021.23%2011.75%2042.98%2020.86%2066%2031%20c%2026.32%2011.6%2050.4%2022.45%2077%2032%20c%2026.34%209.46%2052.25%2018.13%2079%2024%20c%2024.84%205.45%2050.11%207.73%2076%2010%20c%2020.62%201.81%2040.23%202%2061%202%20c%2012.61%200%2025.63%200.03%2037%20-2%20c%206.32%20-1.13%2014.68%20-4.86%2019%20-8%20c%201.79%20-1.3%202.59%20-5.38%203%20-8%20c%200.53%20-3.37%200.36%20-7.36%200%20-11%20c%20-0.64%20-6.37%20-1.49%20-12.8%20-3%20-19%20c%20-1.49%20-6.11%20-3.43%20-12.49%20-6%20-18%20l%20-8%20-12%22/%3E%3Cpath%20stroke-linejoin=%22round%22%20stroke-linecap=%22round%22%20stroke-width=%223%22%20stroke=%22rgb(0,%200,%200)%22%20fill=%22none%22%20d=%22M%20402%20117%20c%20-0.58%200.32%20-21.85%2011.47%20-33%2018%20c%20-12.92%207.57%20-24.04%2015.35%20-37%2023%20c%20-15.71%209.28%20-30.46%2016.61%20-46%2026%20c%20-15.74%209.51%20-29.26%2019.49%20-45%2029%20c%20-15.54%209.39%20-29.9%2017.38%20-46%2026%20c%20-23.31%2012.47%20-45.03%2022.61%20-68%2035%20c%20-7.42%204%20-18.59%2010.99%20-21%2013%20c%20-0.35%200.29%201.96%201.69%203%202%20c%202.03%200.61%204.57%200.77%207%201%20c%2073.39%207.01%20139.56%2014.65%20213%2020%20c%2049.48%203.6%2094.23%205.53%20144%206%20c%20170.6%201.6%20322.27%20-0.58%20494%200%20c%2032.68%200.11%2094%202%2094%202%22/%3E%3Cpath%20stroke-linejoin=%22round%22%20stroke-linecap=%22round%22%20stroke-width=%223%22%20stroke=%22rgb(0,%200,%200)%22%20fill=%22none%22%20d=%22M%20666%201%20c%200.02%200.09%201.38%203.63%201%205%20c%20-1.07%203.86%20-3.55%208.96%20-6%2013%20c%20-4.18%206.89%20-8.46%2014.7%20-14%2020%20c%20-8.77%208.38%20-20.09%2015.77%20-31%2023%20c%20-13.19%208.73%20-26.11%2017.14%20-40%2024%20c%20-14.43%207.13%20-29.7%2013.63%20-45%2018%20c%20-17.03%204.87%20-34.99%207.79%20-53%2010%20c%20-20.42%202.51%20-40.06%203.31%20-61%204%20c%20-20.89%200.69%20-40.11%200.59%20-61%200%20c%20-15.44%20-0.44%20-29.78%20-1.55%20-45%20-3%20c%20-6.16%20-0.59%20-12.62%20-1.72%20-18%20-3%20c%20-1.06%20-0.25%20-3%20-1.39%20-3%20-2%20c%200%20-0.84%201.69%20-3.53%203%20-4%20c%2010.58%20-3.78%2025.86%20-8.92%2039%20-11%20c%2020.17%20-3.2%2040.83%20-4.65%2062%20-5%20c%2060.93%20-1.01%20117.98%20-0.36%20179%201%20c%2015.74%200.35%2030.88%202.14%2046%204%20c%203.73%200.46%2011.2%202.97%2011%203%20c%20-0.3%200.05%20-11.35%20-0.93%20-17%20-2%20c%20-6.8%20-1.29%20-13.29%20-2.92%20-20%20-5%20c%20-13.06%20-4.05%20-25.21%20-8.2%20-38%20-13%20c%20-6.27%20-2.35%20-11.72%20-5.54%20-18%20-8%20c%20-11.19%20-4.39%20-33%20-12%20-33%20-12%22/%3E%3C/svg%3E`                                // let svg = `data:image/svg+xml,<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160" height="277"><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="rgb(96, 98, 102)" fill="none" d="M 158 1 c 0.02 0.12 0.95 4.64 1 7 c 0.29 14.37 0.77 29.37 0 43 c -0.19 3.31 -1.72 7.02 -3 10 c -0.61 1.43 -1.8 3.16 -3 4 c -1.82 1.27 -4.75 2.44 -7 3 c -1.48 0.37 -3.47 0.36 -5 0 c -3.87 -0.91 -12 -4 -12 -4"/><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="rgb(96, 98, 102)" fill="none" d="M 85 43 l 1 1"/><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="rgb(96, 98, 102)" fill="none" d="M 85 43 c 0.28 0.28 11.84 10.45 16 16 c 2.39 3.19 3.96 8.02 5 12 c 0.88 3.38 0.46 9.79 1 11 c 0.18 0.39 2.53 -1.18 3 -2 c 0.66 -1.16 1 -5 1 -5"/><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="rgb(96, 98, 102)" fill="none" d="M 103 54 l 1 1"/><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="rgb(96, 98, 102)" fill="none" d="M 103 54 c -0.07 0.32 -2.92 11.8 -4 18 c -1.65 9.51 -2.26 18.55 -4 28 c -1.33 7.21 -2.33 16.73 -5 21 c -1.29 2.07 -7.01 1.58 -10 3 c -3.1 1.47 -6.44 3.9 -9 6 c -0.85 0.7 -1.34 1.95 -2 3 c -1.07 1.7 -2.3 3.26 -3 5 c -1.25 3.12 -2.54 6.66 -3 10 c -0.84 6.1 -1.23 13.14 -1 19 c 0.08 1.95 1.06 4.28 2 6 c 0.95 1.75 2.45 3.64 4 5 c 3.63 3.18 7.77 7.69 12 9 c 9.4 2.93 22.44 4.6 33 5 c 6.4 0.24 13.67 -1.42 20 -3 c 4.07 -1.02 8.46 -2.95 12 -5 c 2.51 -1.46 5.12 -3.91 7 -6 c 0.91 -1.02 1.88 -2.67 2 -4 c 0.49 -5.35 0.46 -12.28 0 -18 c -0.19 -2.31 -0.93 -4.93 -2 -7 c -3.11 -5.99 -6.94 -13.75 -11 -18 c -2.07 -2.17 -6.8 -3.15 -10 -4 c -1.49 -0.4 -3.53 -0.43 -5 0 c -3.82 1.12 -8.44 2.75 -12 5 c -8.81 5.57 -18.14 11.91 -26 19 c -8.98 8.1 -16.68 17.56 -25 27 c -4.34 4.93 -7.83 10.6 -12 15 c -1.57 1.65 -5.11 4.25 -6 4 c -0.75 -0.21 -0.35 -4.16 -1 -6 c -1.29 -3.66 -3.69 -7.2 -5 -11 c -2.03 -5.88 -2.94 -12.22 -5 -18 c -1.24 -3.46 -3.51 -6.48 -5 -10 c -8.77 -20.75 -25 -61 -25 -61"/><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="rgb(96, 98, 102)" fill="none" d="M 1 83 l 1 1"/><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="rgb(96, 98, 102)" fill="none" d="M 1 83 c 0 0.32 -0.84 12.22 0 18 c 1.44 9.89 3.64 20.23 7 30 c 11.42 33.22 23.29 65.4 37 98 c 6.91 16.42 24 47 24 47"/></svg>`;

        // $("#signature").jSignature("setData", str); 
        //提交
        $('#save').click(function () {
            if ($("#signature").jSignature('getData', 'native').length === 0) {
                alert("请签名后再提交！");
                return;
            }
            //将签名的画布保存为base64编码字符串 默认是png的
            // var datapair = $("#signature").jSignature("getData", "image");
            //svgbase64
            var datapair = $("#signature").jSignature("getData", "base30");
            var i = new Image();
            console.log('datapair',datapair,datapair[1]);
            i.src = "data:" + datapair.join(",");
            console.log('i.src ',i.src );
            
            $('.signImg').attr('src', i.src)
        })
    </script>
</body>

</html>